
<template>
    <div class="carstatus">
      <!--    <div>车辆使用率</div>-->
      <div id="carUseage"></div>
    </div>
</template>

<script>
export default {
  name: "BillboardCarUseRate",
  data() {
    return {
      echartData:[
        // { value: 1048, name: '在途车辆' },
        // { value: 95, name: '空闲车辆' }
      ],
      total:0
    }
  },
  methods: {
    getCarUsage(){
      var chartDom = document.getElementById('carUseage');
      var myChart = this.$echarts.init(chartDom);
      setTimeout(()=>{
        var option;
        let bgColor = '#fff';
        let title = '使用率';
        let color = ['#ec7777','#6eba8c', '#0e8174', '#4cb1a7', '#c0d76f', '#4AEAB0'];
        option = {
          backgroundColor: bgColor,
          color: color,
          // tooltip: {
          //     trigger: 'item'
          // },
          title: [{
            text: '{name|' + title + '}\n{val|' + (getUsage(this.echartData)/this.total*100).toFixed(2) + '%}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 20,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333',
                }
              }
            }
          },
            {
              text: '车辆总数：'+this.total,
              top: 20,
              right: 20,
              textStyle: {
                fontSize: 20,
                color:'#666666',
                fontWeight: 400
              }
            }
          ],
          series: [{
            type: 'pie',
            radius: ['50%', '92%'],
            center: ['50%', '50%'],
            data: this.echartData,
            hoverAnimation: false,
            startAngle:90,//起始角度 不设置该值默认为：90
            minAngle:10,//设定 最小角度
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 0.1
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 130,
                lineStyle: {
                  color: '#bdbdbd'
                }
              }
            },
            label: {
              normal: {
                show: false,
                formatter: params => {
                  return (
                    '{icon|●}{name|' + params.name + '}{value|' +
                    formatNumber(params.value) + '}'
                  );
                },
                padding: [0 , -125, 25, -140],
                rich: {
                  icon: {
                    fontSize: 18
                  },
                  name: {
                    fontSize: 20,
                    padding: [0, 10, 0, 4],
                    color: '#666666'
                  },
                  value: {
                    fontSize: 23,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }]
        };
        option && myChart.setOption(option);
      },1000)
      this.getWindowAdjust(myChart);
      let getUsage=function(objs){
        var r=0;
        for(let i=0;i<objs.length;i++){
          // console.info(objs[i].value)
          if(objs[i].name=="在途车辆"){
            r=objs[i].value;
          }
        }
        return r;
      };
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
      }
    },
    getCarUsageData(){
      //请求echartData
      this.$axios({
        url: 'car/getCarUsage',
        method: 'post'
      }).then(res => {
        if(res.data.success){
          this.echartData= res.data.object
          this.total = this.echartData.reduce((a, b) => {
            return a + b.value * 1
          }, 0);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    //窗口自适应
    getWindowAdjust(obj){
      window.addEventListener("resize", function() {
        obj.resize();
      });
    }
  },
  mounted() {
    this.getCarUsageData();
    this.getCarUsage();
  }
}
</script>

<style scoped>
.carstatus{
  width: 90%;
}
#carUseage{
  margin-top: 20px;
  width: 100%;
  height: 45vh;
}
</style>
